<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Combine</title>
    <script src="../js/hammer.js"></script>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        .test {
            width: 100%;
            height: 50%;
            background: #ffd800;
            text-align: left;
        }

        .result {
            width: 100%;
            height: 50%;
            background: #b6ff00;
            text-align: left;
        }
    </style>
</head>
<body>
<div id="test" class="test">事件区域</div>
<div id="result" class="result">事件结果：组合触发<br /></div>
<script type="text/javascript">
    //创建一个新的hammer对象并且在初始化时指定要处理的dom元素

    var panelX, panelY
    eAction = {none:0, rotate:1, pinch:2, doublepan:3}
    var action = eAction.none

    var beginRotation = 0
    var beginPinch = 0


    var mc=new Hammer.Manager(document.getElementById("test"));
    mc.add(new Hammer.Pan({threshold:0,pointers:0}));
    mc.add(new Hammer.Rotate({threshold:0})).recognizeWith(mc.get('pan'));
    mc.add(new Hammer.Pinch({threshold:0})).recognizeWith([mc.get('pan'),mc.get('rotate')]);
    mc.add(new Hammer.Tap());
    mc.add(new Hammer.Press());

    mc.on("panstart panmove panend",  function (e) {

        var deltax, deltay

        if (e.type == "panstart") {
            document.getElementById("result").innerHTML = "平移,开始：" + "<br />"
                + document.getElementById("result").innerHTML;
            panelX = 0
            panelY = 0
        }
        else if (e.type == "panmove") {
            deltax = e.deltaX - panelX
            deltay = e.deltaY - panelY

            if(action == eAction.none && e.pointers.length > 1
                && Math.abs(deltay) > 50
                && (e.offsetDirection == Hammer.DIRECTION_UP || e.offsetDirection == Hammer.DIRECTION_DOWN)) {
                action = eAction.doublepan
            }


            if (action == eAction.doublepan) {
                document.getElementById("result").innerHTML = "双指旋转" + ", pos=(" + deltax + "," + deltay + ")" + "<br />"
                    + document.getElementById("result").innerHTML;
            }
            else if(e.pointers.length == 1) {
                document.getElementById("result").innerHTML = "平移" + ", pos=(" + deltax + "," + deltay + ")" + "<br />"
                    + document.getElementById("result").innerHTML;
            }
        }
        else if (e.type == "panend") {
            document.getElementById("result").innerHTML = "平移, 结束：" + "<br />"
                + document.getElementById("result").innerHTML;
            if(action == eAction.doublepan) {
                action = eAction.none
            }
        }

        if (false) {
            document.getElementById("result").innerHTML = "平移, 手指数目：" + e.pointers.length +"，方向" + e.offsetDirection + ",pos=(" + deltax + "," + deltay + ")" + "<br />"
                + document.getElementById("result").innerHTML;
            //控制台输出
            console.log(e);
        }
    });
    mc.on("rotatestart rotatemove rotateend", function (e) {

        if (e.type == "rotatestart") {
            document.getElementById("result").innerHTML = "旋转开始：" + (e.rotation - beginRotation) + "<br />"
                + document.getElementById("result").innerHTML;
            beginRotation = e.rotation
        }
        else if (e.type == "rotatemove") {
            if (action == eAction.none && Math.abs(e.rotation - beginRotation) > 15) {
                action = eAction.rotate
            }
        }
        else if (e.type == "rotateend") {
            document.getElementById("result").innerHTML = "旋转结束：" + (e.rotation - beginRotation) + "<br />"
                + document.getElementById("result").innerHTML;
            if (action == eAction.rotate) {
                action = eAction.none
            }
        }

        if (action == eAction.rotate) {
            document.getElementById("result").innerHTML = "旋转角度：" + (e.rotation - beginRotation) + "<br />"
                + document.getElementById("result").innerHTML;
            //控制台输出
            console.log(e);
        }
    });
    mc.on("pinchstart pinchmove pinchend", function (e) {

        if (e.type == "pinchstart") {
            document.getElementById("result").innerHTML = "缩放开始：" + e.scale + "<br />"
                + document.getElementById("result").innerHTML;
            beginPinch = e.scale
        }
        else if(e.type == "pinchmove") {
            if(action == eAction.none && Math.abs(e.scale - beginPinch) > 0.1) {
                action = eAction.pinch
            }
        }
        else if (e.type == "pinchend") {
            document.getElementById("result").innerHTML = "缩放：" + e.scale + "<br />"
                + document.getElementById("result").innerHTML;
            if (action == eAction.pinch) {
                action = eAction.none
            }
        }

        if (action == eAction.pinch) {
            document.getElementById("result").innerHTML = "缩放结束：" + e.scale + "<br />"
                + document.getElementById("result").innerHTML;
            //控制台输出
            console.log(e);
        }
    });
    mc.on("tap", function (e) {
        if (true) {
            document.getElementById("result").innerHTML = "点击了一下！ <br />"
                + document.getElementById("result").innerHTML;
            //控制台输出
            console.log(e);
        }
    });
    mc.on("hammer.input",function(ev){
        if(ev.isFinal){
            console.log('player leave finger');
        }
    })
    mc.on("press",  function (e) {
        if (true) {
            document.getElementById("result").innerHTML = "长按了一次<br />"
                + document.getElementById("result").innerHTML;
            //控制台输出
            console.log(e);
        }
    })


</script>
</body>
</html>